<template>
	<div class="scrollbar">
		<el-button @click="add">Add Item</el-button>
		<el-button @click="onDelete">Delete Item</el-button>
		<el-scrollbar max-height="400px">
			<p v-for="item in count" :key="item" class="scrollbar-demo-item">
				{{ item }}
			</p>
		</el-scrollbar>
		
		<el-scrollbar height="400px">
			<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
		</el-scrollbar>

		<el-scrollbar>
			<div class="flex-content">
				<p v-for="item in 50" :key="item" class="scrollbar-demo-item">
					{{ item }}
				</p>
			</div>
		</el-scrollbar>
	</div>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	let count = ref(3),
		add = () => {
			count.value++
		},
		onDelete = () => {
			if (count.value > 0) {
				count.value--
			}
		}
</script>
<style lang="scss" scoped>
	.scrollbar {}
</style>
